<template>
	<sc-page-header :title="id<=0?'新增':form.title" icon="el-icon-burger"></sc-page-header>

	<el-main>
		<el-alert title="注意: 因为keep-alive只接受组件name,导致多路由共用组件时,关闭或刷新一个标签导致其他同一组件的页面缓存失效,后续还在寻找完美的解决方案.建议在列表页使用dialog或者drawer形式" type="error" style="margin-bottom: 15px;"></el-alert>
		<el-card shadow="never">
			<el-form :model="form" :rules="rules" ref="postForm"  label-width="100px">
				<el-form-item label="分类" prop="categoryId">
					<sc-simp-select v-model="form.categoryId" :apiObj="apiCategoryObj" :selfProps="props" clearable filterable style="width: 100%;"></sc-simp-select>
				</el-form-item>
				<el-form-item label="分类名称" prop="title">
					<el-input v-model="form.title" placeholder="请输入分类名称" clearable></el-input>
				</el-form-item>
				<el-form-item label="展示图" prop="img">
					<sc-upload :apiObj="apiUploadObj" v-model="form.img" title="展示图" icon="el-icon-picture"></sc-upload>
				</el-form-item>
				<el-form-item label="分类描述" prop="description">
					<el-input v-model="form.description" placeholder="请输入分类描述" clearable></el-input>
				</el-form-item>
				<el-form-item label="文章详情" prop="content">
					<sc-editor v-model="form.content" :templates="templates" placeholder="请输入" :height="400"></sc-editor>
				</el-form-item>
				<el-form-item label="热门推荐" prop="ishot">
					<el-switch v-model="form.ishot"></el-switch>
				</el-form-item>
				<el-form-item label="分类置顶" prop="istop">
					<el-switch v-model="form.istop"></el-switch>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
				</el-form-item>
			</el-form>
		</el-card>
	</el-main>
</template>

<script>
	import {defineAsyncComponent} from "vue";
	const scEditor = defineAsyncComponent(() => import('@/components/scEditor'));

	export default {
		name: 'listCrud-detail',
		components: {
			scEditor
		},
		data() {
			return {
				id: 0,
				isSaveing: false,
				apiUploadObj:this.$API.common.upload,
				apiCategoryObj:this.$API.category.list,
				props: {
					label: 'title',
					value: 'id',
				},
				form: {
					id:null,
					title: "",
					description: "",
					img: "",
					categoryId: "",
					content: "",
					istop: "",
					ishot: "",
				},
				//验证规则
				rules: {
					categoryId: [
						{required: true, message: '请选择分类'}
					],
					title: [
						{required: true, message: '请输入文章标题'}
					],
					img: [
						{required: true, message: '请上传图片'}
					],
					description: [
						{required: true, message: '请输入描述信息'}
					],
					content: [
						{required: true, message: '请输入文章详情'}
					],
				},
				templates: [
					{
						title: '自定义HTML模板',
						description: '',
						content: '<strong>自定义HTML模板</strong>'
					}
				]
			}
		},
		created() {
			if(this.$route.query.id && this.$route.query.id>0){
				this.$API.article.detail.get(this.$route.query.id).then((res)=>{
					if(res.code === 200){
						this.form = res.data;
						this.id = this.$route.query.id
						this.form.id = this.$route.query.id
						console.log(typeof(this.form.categoryId))
						this.form.categoryId = this.form.category.title
						this.$store.commit("updateViewTagsTitle", this.id>0?`编辑`:"新增")
						console.log(typeof(this.form.categoryId))
						console.log(this.form.categoryId)
					}
				})
			}
		},
		mounted() {
			//修改tab名称
			console.log(typeof(this.form.categoryId))
			console.log(this.form.categoryId)
		},
		methods: {
			//表单提交方法
			async submit(){
				const valid = await this.$refs.postForm.validate().catch(() => {})
				if(!valid){
					return false
				}
				this.isSaveing = true;
				if(isNaN(this.form.categoryId*1)){
					this.form.categoryId = this.form.category.id
				}
				const res = await this.$API.article.add.post(this.form);
				this.isSaveing = false;
				if(res.code == 200){
					if(this.mode=='add'){
						this.form.id = res.data
					}
					this.visible = false;
					this.$message.success("操作成功")
				}else{
					this.$alert(res.message, "提示", {type: 'error'})
				}
			},
		}
	}
</script>

<style scoped>
.sceditor{
	width: 100%;
}
</style>
